<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>

<fmt:setLocale value="${config.locale.language}"/>
<fmt:setBundle basename="vn.ugame.bundle.Language" var="languageBundle"/>

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
        <title>UGame | Store</title>

        <script type="text/javascript" src="/js/jquery.min.js"></script>
        <script type="text/javascript" src="/js/jquery-ui.min.js"></script>
        <script type="text/javascript" src="/js/jquery.raty.min.js"></script>    
        <script type="text/javascript" src="/js/iscroll.js"></script>
        <script type="text/javascript" src="/js/jquery.timers.js"></script>
        <script type="text/javascript" src="/js/ugame.js"></script>

        <link rel="stylesheet" href="/css/style.css" type="text/css"/>
        <link rel="stylesheet" href="/css/store.css" type="text/css"/>
    </head>
    <body>
        <div id="wrapper">
            <div id="main-scroller">
                <jsp:include page="template/header.jsp" flush="false"/>
                <div id="main" class="default-panel">
                    <div id="item-slider" class="slider-1">
                        <div class="scroller" style="width:3000px;">
                            <c:forEach items="${sliders}" var="item">
                                <div class="slider-item">
                                    <a href="<c:url value="/${item.module.name}/${item.name}/${item.id}"/>">
                                        <img src="<c:url value="/image-engine/${item.id}/3"/>" alt=""/></a>
                                </div>
                            </c:forEach>
                        </div>
                    </div>
                    <!-- End #slide -->
                    <c:forEach var="item" items="${model.result}">
                        <div class="item default-panel">
                            <div class="item-title default-panel">
                                <p class="title touch">
                                    <a href="<c:url value="/${item.module.name}/${item.name}/${item.id}"/>">
                                        <c:out value="${item.text}"/>
                                    </a>
                                    <span class="text-effect-1 price touch">
                                        <c:if test="${item.price > 0}">
                                            <c:if test="${config.locale.language == 'en-us'}">                                            
                                                <fmt:formatNumber 
                                                    value="${item.price * rateOfCurrency}" 
                                                    type="currency"/>
                                            </c:if>
                                            <c:if test="${config.locale.language == 'vi-vn'}">
                                                <fmt:formatNumber 
                                                    value="${item.price * rateOfCurrency}" 
                                                    type="number"
                                                    maxFractionDigits="0"/>K
                                            </c:if>
                                        </c:if>
                                        <c:if test="${item.price == 0}">
                                            free!
                                        </c:if>
                                    </span>
                                </p>       
                                <div id="star-<c:out value="${item.id}"/>" class="star"></div>
                                <script type="text/javascript">
                                    $('#star-<c:out value="${item.id}"/>').raty({
                                        readOnly : true,
                                        score    : <c:out value="${item.rate}"/>,
                                        size: 12
                                    });
                                </script>
                            </div>
                            <!-- End .item-title -->

                            <div class="item-main-content default-panel">
                                <table width="100%" cellpadding="0" cellspacing="0">
                                    <tr>
                                        <td width="64px">
                                            <a href="<c:url value="/${item.module.name}/${item.name}/${item.id}"/>">
                                                <div class="status status-<c:out value="${item.status}"/>">
                                                </div>
                                                <!-- End .status -->
                                                <img class="game-icon" src="<c:url value="/image-engine/${item.id}/1" />" alt=""/>
                                            </a>
                                        </td>
                                        <td valign="top">
                                            <a href="<c:url value="/${item.module.name}/${item.name}/${item.id}"/>">
                                                <div class="content touch">
                                                    <span>
                                                        <fmt:message 
                                                            key="ugame.loves" 
                                                            bundle="${languageBundle}"/><c:out value=": ${item.loveNumber} | "/>
                                                        <fmt:message 
                                                            key="ugame.store.total-downloads" 
                                                            bundle="${languageBundle}"/><c:out value=": "/>
                                                        <fmt:formatNumber 
                                                            value="${item.downloadNumber}" 
                                                            type="number" 
                                                            groupingUsed="false" />
                                                    </span>
                                                    <p><c:out value="${item.summary}"/></p>
                                                </div>
                                                <!-- End .content -->
                                            </a>
                                        </td>
                                    </tr>
                                </table>
                            </div>
                            <!-- End .item-main-content -->
                        </div>
                    </c:forEach>

                    <div id="category-nav" class="default-panel touch">
                        <table cellpadding="0" cellspacing="0">
                            <tr>
                                <td>
                                    <a href="#" onclick="return false;" id="category" class="text-effect-3">
                                        <fmt:message 
                                            key="ugame.categories" 
                                            bundle="${languageBundle}"/>
                                    </a>
                                </td>
                                <td>
                                    <a href="#" class="text-effect-3">
                                        <fmt:message 
                                            key="ugame.top-new" 
                                            bundle="${languageBundle}"/>
                                    </a>
                                </td>
                                <td>
                                    <a href="#"  class="text-effect-3">  
                                        <fmt:message 
                                            key="ugame.top-rate" 
                                            bundle="${languageBundle}"/>
                                    </a>
                                </td>
                                <td>
                                    <a href="#"  class="text-effect-3">
                                        <fmt:message 
                                            key="ugame.hot" 
                                            bundle="${languageBundle}"/>!
                                    </a>
                                </td>
                            </tr>
                        </table>
                        <div id="category-sub-nav" class="touch">
                            <c:forEach var="category" items="${categories}">
                                <a href="/<c:url value="${category.name}"/>" class="text-effect-3">
                                    <c:out value="${category.text}"/>
                                </a>
                            </c:forEach>
                        </div>
                        <!-- End #category-sub-nav -->    
                    </div>
                    <!-- End #category-nav -->
                    <c:if test="${model.pageCount > 1}">
                        <div id="page-nav" class="default-panel">
                            <table cellpadding="0" cellspacing="0">
                                <tr>
                                    <td>
                                        <c:if test="${model.page <= 1}">
                                            <a href="#" onclick="return false" class="prev-button-1"></a>
                                        </c:if>
                                        <c:if test="${model.page > 1}">
                                            <a href="<c:url value="/${config.name}/1/${model.keyword}"/>" class="prev-button-1"></a>
                                        </c:if>
                                    </td>
                                    <td>
                                        <c:out value="${model.page} "/>
                                        <fmt:message 
                                            key="ugame.page-1" 
                                            bundle="${languageBundle}"/>
                                        <c:out value=" ${model.pageCount} "/>
                                        <fmt:message 
                                            key="ugame.page-2" 
                                            bundle="${languageBundle}"/>                                        
                                    </td>
                                    <td>
                                        <c:if test="${model.page >= model.pageCount}">
                                            <a href="#" onclick="return false" class="next-button-1"></a>
                                        </c:if>
                                        <c:if test="${model.page < model.pageCount}">
                                            <a href="<c:url value="/${config.name}/${model.pageCount}/${model.keyword}"/>" class="next-button-1"></a>
                                        </c:if>
                                    </td>
                                </tr>
                            </table>
                        </div>
                        <!-- End #page-nav -->
                    </c:if>
                </div>
                <!-- End #main -->
                <jsp:include page="template/footer.jsp" flush="false"/>
            </div>
        </div>
        <!-- End #wrapper-->
        <script type="text/javascript" src="/js/template.js"></script>
        <script type="text/javascript" src="/js/store.js"></script>
        <c:if test="${message != null}">
            <script type="text/javascript">
                var msg = ${message};
                if(msg!=null && msg!=""){
                    var readyStateCheckInterval = setInterval(function() {
                        if (document.readyState === "complete") {
                            alert(msg);
                            clearInterval(readyStateCheckInterval);
                        }
                    }, 1000);
                }
            </script>
        </c:if>
    </body>
</html>